<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <h1>{{name}}</h1>
    <div class="task">
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>链接</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in task_arr" :key="item.id" :class="index % 2 == 0 ? 'oushu' : 'jishu' ">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.url}}</td>
                    <td>{{item.sold}}</td>
                    <td><button @click=" del(item.id)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <button @click="newaddShow = true">新增</button>
        <div class="add_box" v-show="newaddShow">
            名称: <input class="add_box_name" v-model="newitem.name" type="text" placeholder="请输入名称"><br>
            链接: <input class="add_box_url" v-model="newitem.url" type="text" placeholder="请输入网站链接"><br>
            描述: <input class="add_box_sold" v-model="newitem.sold" type="text" placeholder="请对此描述"><br>
            <button @click="save()">保存</button>
            <button @click="newaddShow=false" v-model="newaddShow">取消</button>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '友情链接',
            task_arr: [{
                id: 0,
                name: '哔哩哔哩',
                url: 'http://www.bilibili.com/',
                sold: '哔哩哔哩官网'
            },
            {
                id: 1,
                name: '今日头条',
                url: 'http://www.toutiao.com/',
                sold: '今日头条:热榜新闻'
            },
            {
                id: 2,
                name: '百度',
                url: 'http://www.baidu.com/',
                sold: '百度搜索'
            },
            {
                id: 3,
                name: '新浪微博',
                url: 'http://www.weibo.com/',
                sold: '微博之夜'
            },
            {
                id: 4,
                name: '腾讯网',
                url: 'http://www.qq.com/',
                sold: '腾讯网tengxun'
            },],
            newitem: {
                name: '',
                url: '',
                sold: ''
            },
            newaddShow: false//添加框显示隐藏
        },
        methods: {
            del(id) {
                this.task_arr = this.task_arr.filter(item => item.id !== id);
                return
            },
            save() {
                if (!this.newitem.name || !this.newitem.url) {
                    alert('名称或链接不能为空,请重新输入')
                }
                else {
                    this.task_arr.push({
                        id: this.task_arr.length,
                        name: this.newitem.name,
                        url: this.newitem.url,
                        sold: this.newitem.sold
                    })
                }
                this.newitem = { name: '', url: '', sold: '' };
                this.showAddBox = false;

            }
        }
    })
</script>
<style>
    基础样式 body {
        font-family: "Microsoft YaHei", sans-serif;
        padding: 20px;
    }

    h1 {
        color: #333;
        text-align: center;
        margin-bottom: 30px;
    }

    .task {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* 表格样式 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    th,
    td {
        padding: 12px 15px;
        text-align: left;
        border: 1px solid #ddd;
    }

    th {
        background-color: #4CAF50;
        color: white;
        font-weight: bold;
    }

    /* 隔行换色样式 */
    .oushu {
        background-color: #25c0d4;
        /* 偶数行背景色 */
    }

    .jishu {
        background-color: #0fdc35;
        /* 奇数行背景色 */
    }

    /* 行 hover 效果 */
    tr:hover {
        background-color: #e8f5e9;
        transition: background-color 0.3s;
    }

    /* 按钮样式 */
    button {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
    }

    button:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    button:active {
        transform: translateY(1px);
    }

    /* 新增按钮 */
    .task>button {
        background-color: #2196F3;
        color: white;
        margin-bottom: 15px;
    }

    /* 删除按钮 */
    td button {
        background-color: #f44336;
        color: white;
    }

    /* 保存按钮 */
    .add_box button:first-of-type {
        background-color: #4CAF50;
        color: white;
    }

    /* 取消按钮 */
    .add_box button:last-of-type {
        background-color: #f0f0f0;
        color: #333;
    }

    /* 添加框样式 */
    .add_box {
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
    }

    /* 输入框样式 */
    input {
        width: 300px;
        padding: 8px;
        margin: 8px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    }
</style>